<template>
    <view id="app">
        <view class="location">
            <image src="../../static/icon/weizhi.png"></image>
            <text>百合苑</text>
            <image src="../../static/icon/arrow-right-nl.png"></image>
        </view>
        <view class="search">
            <view @click="searchPageFun">
                <icon type="search" size="20"></icon>
                <text>30分钟极速达</text>
            </view>
        </view>
        <view class="nav">
            <scroll-view scroll-x="true" show-scrollbar="false">
                <view class="navAll">

                        <view
                                :id="'item'+item.id"
                                :style="'color:'+ item.color + ';'+ 'border-bottom:'+item.unLine +';padding:0.5rem'"
                                v-for="(item,index) in topNavData"
                                @click="topNavBtn(index)"
                        >
                            {{item.name}}
                        </view>

                </view>
            </scroll-view>
        </view>

        <view class="page-section-spacing" style="width: 100%">
            <swiper style="width: 100%;height: 10rem" class="swiper" indicator-dots="true" autoplay="true"
                    duration="500"
                    indicator-color="#FFF" circular="true" indicator-active-color="#17B357">
                <swiper-item style="width: 100%" v-for="item in lunboImgArr" @click="tapLunbo">
                    <image :src="item" style="width: 100%" mode="widthFix"></image>
                </swiper-item>

            </swiper>
        </view>
        <view id="allClassView">
            <view v-for="item in allClassData" class="classItem" @click="tapClass">
                <view class="classItemImgView">
                    <image :src="item.imgUrl"></image>
                </view>
                <view class="classItemTextView">{{item.name}}</view>
            </view>
        </view>

        <car :price="myPrice"></car>
    </view>
</template>

<script>
    import * as url from '../../until/api'
    import car from '../../until/com/car'
    import until from  '../../until/until'

    export default {
        name:"index",
        components:{
            car,
        },
        data() {
            return {
                myPrice:0,
                topNavArr: [
                    {id: 1, name: '推荐', unLine: '', color: ' #d8d8d8'},
                    {id: 2, name: '掌柜推荐', unLine: '', color: ' #d8d8d8'},
                    {id: 3, name: '疯狂折扣', unLine: '', color: ' #d8d8d8'},
                    {id: 4, name: '人气热卖', unLine: '', color: ' #d8d8d8'},
                    {id: 5, name: '本周上新', unLine: '', color: ' #d8d8d8'},
                    {id: 6, name: '水果', unLine: '', color: ' #d8d8d8'},
                    {id: 7, name: '蔬菜', unLine: '', color: ' #d8d8d8'},
                    {id: 8, name: '肉禽蛋', unLine: '', color: ' #d8d8d8'},
                    {id: 9, name: '还鲜水产', unLine: '', color: ' #d8d8d8'},
                    {id: 10, name: '粮油调味', unLine: '', color: ' #d8d8d8'},
                    {id: 11, name: '早点', unLine: '', color: ' #d8d8d8'},
                    {id: 12, name: '熟食冻品', unLine: '', color: ' #d8d8d8'},
                    {id: 13, name: '牛奶面包', unLine: '', color: ' #d8d8d8'},
                    {id: 14, name: '酒水冲饮', unLine: '', color: ' #d8d8d8'},
                    {id: 15, name: '休闲零食', unLine: '', color: ' #d8d8d8'},
                    {id: 16, name: '清凉季', unLine: '', color: ' #d8d8d8'},
                    {id: 17, name: '健康防护', unLine: '', color: ' #d8d8d8'},
                    {id: 18, name: '日用清洁', unLine: '', color: ' #d8d8d8'},
                    {id: 19, name: '护理美妆', unLine: '', color: ' #d8d8d8'},
                    {id: 20, name: '母婴', unLine: '', color: ' #d8d8d8'},
                    {id: 21, name: '鲜花宠物', unLine: '', color: ' #d8d8d8'},
                    {id: 22, name: '进口商品', unLine: '', color: ' #d8d8d8'},
                    {id: 23, name: '保健/医械', unLine: '', color: ' #d8d8d8'},
                    {id: 24, name: '面点冰品', unLine: '', color: ' #d8d8d8'},
                ],
                lunboImgArr: [],
                allClassData: [],
            }
        },
        computed: {
            topNavData() {
                return this.topNavArr
            }
        },

        onLoad() {
            this.topNavArr[0].color = '#ffffff'
            this.topNavArr[0].unLine = '0.1rem solid #ffffff'
            let _this = this
            uni.request({
                url: url.getIndexLunboImg,
                method: 'post',
                success: function (resp) {
                    console.log(resp.data);
                    _this.lunboImgArr = resp.data.data;
                }
            })
            uni.request({
                url: url.getAllClass,
                method: 'post',
                success: function (resp) {
                    console.log(resp.data);
                    _this.allClassData = resp.data.data;
                }
            })
        },
        onShow(){
            this.myPrice=parseInt(until.getMoneyNum());   //将价格传给购物车小图标
        },
        methods: {
            searchPageFun() {
                uni.navigateTo({
                    url: '../../pages/search/search'
                })
            },
            topNavBtn(index) {
                if (this.topNavArr[index].color === '#d8d8d8' || index === index) {
                    this.topNavArr.map(item => {
                        item.color = '#d8d8d8'
                        item.unLine = ''
                        return item
                    })
                    this.topNavArr[index].color = '#ffffff'
                    this.topNavArr[index].unLine = '0.1rem solid #ffffff'
                } else {
                    this.topNavArr[index].color = '#d8d8d8'
                    this.topNavArr[index].unLine = ''
                }

                uni.navigateTo({
                    url: '../fruit/fruit'
                })
            },
            tapClass() {
                uni.navigateTo({
                    url: '../fruit/fruit'
                })
            },
            tapLunbo() {
                console.log('tapLunbo');
                uni.navigateTo({
                    // url:'../fruit/fruit',
                    url: '../yhq/yhq'
                })
            },
        }
    }
</script>

<style scoped>
    body {
        width: 10 rpx;
        height: 10 rpx;
        font-size: 16 rpx;
    }

    #app {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .location {
        width: 100%;
        height: 2rem;
        color: #ffffff;
        background-color: #17B357;
    }

    .location > image:nth-child(1) {
        display: inline-block;
        width: 2rem;
        height: 1.8rem;
        float: left;
        margin-left: 1rem;
        margin-top: 0.1rem;
    }

    .location > text:nth-child(2) {
        display: inline-block;
        font-size: 1rem;
        height: 1.6rem;
        line-height: 1.6rem;
        font-weight: bold;
        float: left;
        margin-top: 0.2rem;
        margin-left: 0.5rem;
    }

    .location > image:nth-child(3) {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        text-align: center;
        margin-top: 0.5rem;
        margin-left: 0.2rem;
        float: left;
    }

    .search {
        width: 100%;
        height: 3rem;
        color: #ccc;
        background-color: #17B357;
    }

    .search > view {
        padding: 0;
        width: 96%;
        height: 2rem;
        margin: 0.5rem auto;
        background-color: #ffffff;
        text-align: center;
        line-height: 2rem;
    }

    .search > view > icon {
        padding: 0;
        display: inline-block;
        width: 2rem;
        height: 1.6rem;
        float: left;
        margin-top: 0.2rem;
        margin-left: 6rem;
    }

    .search > view > text {
        float: left;
    }

    .nav {
        width: 100%;
        background-color: #17B357;
        height: 2.5rem;
        overflow: hidden;
    }

    .navAll {
        /*height: 2rem;*/
        overflow: hidden;
        width: 100rem;
    }

    .navAll > view {
        float: left;
        padding: 0.3rem 0.5rem;
        height: 1.2rem;
    }

    #allClassView {
        display: flex;
        flex-wrap: wrap;
    }

    .classItemImgView {
        width: 3rem;
        height: 3rem;
        border-radius: .8rem;
        overflow: hidden;
        margin: .8rem;
        box-sizing: border-box;
        border: 1px solid lightgray;
    }

    .classItemImgView > image {
        width: 100%;
        height: 100%;
    }

    .classItemTextView {
        font-size: .6rem;
        text-align: center;
    }
</style>
